import React, { useState } from "react";
import classNames from "classnames";
import { tabBarList } from "@/ui/TabBar";
import {TabBar,NavBar} from '@/ui'
import { useHistory } from "react-router-dom";
import "./index.less";
export default function Home(props: any) {
  const { prefixCls = "m-react-page-tab-bar" } = props;
  const className = classNames({
    [prefixCls]: true,
  });
  const TabbarList: tabBarList[] = [
    {
      route: "/",
      text: "首页",
      icon: "iconhome",
      id: 0,
      dot: true,
      badge: 123,
      selected: false,
      selectedIcon: "iconmenu",
    },
    {
      route: "/button",
      text: "按钮",
      icon: "iconmenu",
      id: 1,
      selected: true,
    },

    {
      route: "/steps",
      text: "电话",
      icon: "iconbodadianhua",
      id: 2,
      selected: true,
      dot: true,
    },
    {
      route: "/icon",
      text: "我的",
      icon: "iconwode",
      id: 3,
      selected: true,
    },
    {
      route: "/tabbar",
      text: "测试",
      icon: "iconzanpress",
      id: 4,
      selected: true,
      dot: true,
      badge: 123,
      selectedIcon: "iconmenu",
    },
  ];
  const history = useHistory();
  const [index, setIndex] = useState(0);
  const onClick = (id, route) => {
    setIndex(id);
    route && history.push(`${route}`);
  };
  return (
    <div className={className}>
      <NavBar title="TabBar" />
      <div className="list">
        <TabBar
          TabbarList={TabbarList}
          hidden={false}
          tabBarPosition="bottom"
          barTintColor="#fff"
          tintColor="green"
          unselectedTintColor="#222"
          badgeClassName="badgeClassName"
          dotClassName="dotClassName"
          prefixCls="m-react-page-tab-bar"
          onClick={onClick}
          index={index}
        />
      </div>
    </div>
  );
}
